<template>
    <div class="cart-list">
        <scroll class="content" ref="scroll">
           <cart-list-item v-for="(item,index) in cartList" :key="index" :product="item"></cart-list-item>
        </scroll>
    </div>
</template>

<script>
    import Scroll from 'components/common/scroll/Scroll'

    import CartListItem from './CartListItem'

    import {mapGetters} from 'vuex'//获取vuex中getters

    export default {
        name: 'CartList',//购物车列表
        components: {
            Scroll,
            CartListItem
        },
        computed: {
            ...mapGetters(['cartList'])//得到getters中的cartList
        },
        activated() {
            // bug-商品添加至购物车无法滚动
            // 方案-刷新可滚动区域高度
            this.$refs.scroll.refresh()
        }
    }
</script>

<style scoped>
    .cart-list {
        height: calc(100% - 44px - 54px - 40px);
        
    }
    .content {
        height: 100%;
        overflow: hidden;
    }
   
</style>